<template>
  <el-tabs type="border-card" class="num-container" v-model="activeName">
    <el-tab-pane name="article" lazy>
      <span slot="label">
        文章列表统计
        <el-tooltip
          class="item"
          effect="dark"
          content="按文章列表统计"
          placement="top"
        >
          <i class="el-icon-date"></i>
        </el-tooltip>
      </span>
      <!-- <Channel @changeComponent='changeComponent' :checkRowKeys2='checkRowKeys2' @openChannel='openChannel'></Channel> -->
      <Article
        v-bind="$attrs"
        v-on="$listeners"
        @changeActiceName="changeActiceName"
        v-if="activeName == 'article'"
      ></Article>
    </el-tab-pane>
    <el-tab-pane label="按栏目统计" name="channel" lazy>
      <span slot="label">
        按栏目统计
        <el-tooltip
          class="item"
          effect="dark"
          content="按栏目发布的文章数量统计"
          placement="top"
        >
          <i class="el-icon-date"></i>
        </el-tooltip>
      </span>
      <!-- <Channel @changeComponent='changeComponent' :checkRowKeys2='checkRowKeys2' @openChannel='openChannel'></Channel> -->
      <Channel
        v-bind="$attrs"
        v-on="$listeners"
        @changeActiceName="changeActiceName"
      ></Channel>
    </el-tab-pane>

    <el-tab-pane label="按作者统计" name="author" lazy>
      <span slot="label">
        按作者统计
        <el-tooltip
          class="item"
          effect="dark"
          content="按作者发布的文章数量统计"
          placement="top"
        >
          <i class="el-icon-date"></i>
        </el-tooltip>
      </span>
      <Author
        v-bind="$attrs"
        v-on="$listeners"
        @changeActiceName="changeActiceName"
      ></Author>
    </el-tab-pane>

    <el-tab-pane label="按部门统计" name="dep" lazy>
      <span slot="label">
        按部门统计
        <el-tooltip
          class="item"
          effect="dark"
          content="按部门发布的文章数量统计"
          placement="top"
        >
          <i class="el-icon-date"></i>
        </el-tooltip>
      </span>
      <Dep
        v-bind="$attrs"
        v-on="$listeners"
        @changeActiceName="changeActiceName"
      ></Dep>
    </el-tab-pane>
    <el-tab-pane label="按投稿用户统计" name="username" lazy>
      <span slot="label">
        按投稿用户统计
        <el-tooltip
          class="item"
          effect="dark"
          content="按投稿用户的文章数量统计"
          placement="top"
        >
          <i class="el-icon-date"></i>
        </el-tooltip>
      </span>
      <Username
        v-bind="$attrs"
        v-on="$listeners"
        @changeActiceName="changeActiceName"
      ></Username>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { listSite } from "@/api/content/net";

import Article from "./article_num_list.vue";
import Author from "./article_num_author.vue";
import Channel from "./article_num_channel.vue";
import Dep from "./article_num_dep.vue";
import Username from "./article_num_username.vue";
export default {
  name: "Name",
  // props: ["checkRowKeys2"],
  data() {
    return {
      // 当前tab
      activeName: "article",
      //站点列表
      siteList: [],
    };
  },

  components: { Article, Author, Channel, Dep, Username },

  mounted() {
    // this.getSiteList();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      listSite().then((res) => {
        res.data.unshift({ siteId: this.CONSTANCE.siteId, name: "平台系统" });
        this.siteList = res.data;
      });
    },
    changeActiceName(activeName) {
      this.activeName = activeName;
    },
    changeComponent() {
      this.$emit("changeComponent");
    },
    openChannel() {
      this.$emit("openChannel");
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep.num-container {
  border: none;
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    flex: 1;
    .el-tab-pane {
      height: 100%;
      .static-container {
        display: flex;
        flex-direction: column;
        overflow: auto;
        height: 100%;
        .content-wrap {
          margin: 10px;
          .el-form-item .el-form-item {
            margin-bottom: 0;
          }
          .el-badge.item {
            z-index: 99;
          }
        }
      }
    }
  }
}
</style>
